<template>

  <div class="layout canary">
    <movieHeader />
    <movieBody />
  </div>
</template>
<script>
import movieHeader from "../components/movie/movie_herder.vue";
import movieBody from "../components/movie/movie_body.vue";
import http from "../utils/htttp";
import { mapMutations } from "vuex";
export default {
  components: {
    movieHeader,
    movieBody,
  },
  async mounted() {
    let cityname = await this.getLocation();
    // let { CityId } = await this.getCityid(cityname);
  },
  methods: {
    ...mapMutations("city", ["setCityName","setCityId"]),
    getLocation() {
      return new Promise((res, rej) => {
        new BMap.Geolocation().getCurrentPosition((position) => {
          http("/getlocation", {
            params: {
              x: position.point.lat,
              y: position.point.lng,
            },
          }).then((data) =>
            res(data.data.datas.addressComponent.city.substring(0, 2))
          );
        });
      });
    },

    getCityid(name) {
      return new Promise((res, rej) => {
        http("/getcitylists").then((data) => {
          res({
            CityId: data.data.cities.filter((city) => city.name == name)[0]
              .cityId,
            origin: data.data.cities,
          });
        });
      });
    },
  },
};
</script>

<style scoped >
.layout {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>